/* eslint-disable react/display-name */
import React, { useRef, forwardRef, useImperativeHandle, ReactNode } from "react";
import { Scrollbars } from "react-custom-scrollbars";
import { converLayout } from "@/utils";
import { RootState, useSelector } from "@/store";

interface VScrollbarProps {
	width?: number | string;
	height?: number | string;
	autoHide?: boolean;
	style?: React.CSSProperties;
	children?: ReactNode;
}

interface VScrollbarRef {
	scrollTo: (top: number, left: number) => void;
	getValues: () => { top: number; left: number };
}

const VScrollbar = forwardRef<VScrollbarRef, VScrollbarProps>((props, ref) => {
	const { width, height, autoHide = true } = props;
	const scrollbarRef = useRef<Scrollbars>(null);
	const { themeConfig } = useSelector((state: RootState) => state.global);

	useImperativeHandle(ref, () => ({
		scrollTo: (top: number, left: number) => {
			if (scrollbarRef.current) {
				scrollbarRef.current.scrollTop(Math.random() * top);
				scrollbarRef.current.scrollLeft(Math.random() * left);
			}
		},
		getValues: () => ({
			top: scrollbarRef.current ? scrollbarRef.current.getScrollTop() : 0,
			left: scrollbarRef.current ? scrollbarRef.current.getScrollLeft() : 0
		})
	}));
	const renderThumb = ({ style, ...props }: any) => {
		const thumbStyle = {
			width: "10px",
			backgroundColor: themeConfig.isDark ? "rgba(255,255,255,0.14)" : "#c8c8c8"
		};
		return <div style={{ ...style, ...thumbStyle }} {...props} />;
	};
	return (
		<Scrollbars
			style={{
				width: converLayout(width),
				height: converLayout(height),
				// color: "#0a73ff",
				...props.style
			}}
			renderThumbVertical={renderThumb}
			renderThumbHorizontal={renderThumb}
			autoHide={autoHide}
			ref={scrollbarRef}
		>
			{props.children}
		</Scrollbars>
	);
});

export default VScrollbar;
